<script setup name="create-address">
import { watch, reactive } from 'vue';
import { showToast } from 'vant';
import api from '@/api';
import defaultUser from '@/assets/images/default-user.png';

const emit = defineEmits(['update:show']);
const listState = reactive({
    show: false,
    listData: [],
    pagination: {},
    maxLen: 0,
    isLoading: false,
    pageNum: 10,
    numWidth: 14
});
let loadNum = 0;

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    title: {
        title: String,
        default: '商家收款记录'
    },
    type: {
        type: String,
        default: 'code'
    },
    orderId: {
        type: String,
        default: ''
    },
    pageCount: {
        type: Number,
        default: 10
    }
});

watch(
    () => props.show,
    (val) => {
        if (val) {
            loadNum = 0;
            getCustomerList();
            listState.show = true;
        }
    }
);

const getCustomerList = async (type) => {
    let { pagination = {}, listData = [] } = listState;
    let apiName = '';
    const param = {};
    if (props.type === 'group') {
        apiName = 'getPayRecordList';
        param.relayId = props.orderId;
    } else {
        apiName = 'getCollectPayRecordList';
        param.teamId = props.orderId;
    }

    if (type === 'nextPage') {
        param['timeStamp'] = pagination.timeStamp || '';
    }

    try {
        const res = await api.fetchGet(apiName, param, { hasErr: true });
        const { code, data, message } = res || {};

        if (code === 0) {
            const { maxNo, orders, pagination, payRecordShowCount } = data;
            if (maxNo) {
                listState.maxLen = maxNo;
            }
            // 根据最大数量计算页码
            if (payRecordShowCount) {
                listState.pageNum = Math.floor(payRecordShowCount / props.pageCount);
            }
            listData = type === 'nextPage' ? listData.concat(orders) : orders;

            listData.forEach((item, index) => {
                item.num = listState.maxLen - index;
                item.buyerImageHeader =
                    item.buyerImageHeader && item.buyerImageHeader.indexOf('https://') !== -1
                        ? item.buyerImageHeader + '?imageMogr2/thumbnail/88x88'
                        : defaultUser;
            });

            loadNum++;
            listState.numWidth = (listState.maxLen + '').length * 9;
            listState.listData = listData;
            listState.pagination = pagination;
            listState.isFinish = !pagination.moreData;
            listState.isLoading = false;
            listState.isError = false;
        } else {
            listState.isError = true;
            showToast(message);
        }
    } catch (err) {
        listState.isError = true;
        console.log(err);
    }
};

const onPopupClose = () => {
    listState.show = false;
    emit('update:show', false);
};

const onLoadData = () => {
    if (loadNum > listState.pageNum - 1) {
        listState.isFinish = true;
    }
    if (loadNum > listState.pageNum - 1 || listState.isFinish) return;
    getCustomerList('nextPage');
};
</script>

<template>
    <van-popup
        v-model:show="listState.show"
        closeable
        lock-scroll
        close-on-click-overlay
        position="bottom"
        class="popup-box"
        icon-prefix="iconfont"
        safe-area-inset-bottom
        @click-overlay="onPopupClose"
        :style="{ height: 'calc(100vh - 188px)' }"
    >
        <div class="header-box">
            <div class="left-icon" @click="onPopupClose">
                <c-icon name="close" size="24" color="#1A1A1A"></c-icon>
            </div>
            <div class="title">{{ title }}</div>
        </div>
        <div class="list-box" v-if="listState.show">
            <van-list
                v-model:loading="listState.isLoading"
                v-model:error="listState.isError"
                :finished="listState.isFinish"
                offset="100"
                loading-text="正在加载"
                finished-text=" "
                error-text="加载失败，点击重试"
                :immediate-check="false"
                @load="onLoadData"
            >
                <div class="list-item" v-for="(item, index) in listState.listData" :key="index">
                    <div class="index-num" :style="`min-width: ${listState.numWidth}px`">{{
                        item.num
                    }}</div>
                    <div class="content-box">
                        <img class="avatar" :src="item.buyerImageHeader" width="44" height="44" />
                        <div class="info">
                            <div class="name ellipsis-one">{{ item.nickName }}</div>
                            <div class="time" v-if="item.payTime">{{ item.payTime }}</div>
                        </div>
                    </div>
                    <div class="pay-method" v-if="item.payType">
                        <c-icon
                            name="wxpay"
                            size="17"
                            color="#07C160"
                            v-if="item.payType == 'WECHAT_PAY'"
                        ></c-icon>
                        <c-icon name="alipay" size="17" color="#007AFF" v-else></c-icon>
                        <view
                            class="pay-text"
                            :style="`color:${item.payType == 'WECHAT_PAY' ? '#07C160' : '#007AFF'}`"
                        >
                            支付成功
                        </view>
                    </div>
                    <c-price
                        v-else
                        :size="17"
                        :is-wan="false"
                        :is-simple="false"
                        :price="item.payAmount"
                    ></c-price>
                </div>
            </van-list>
        </div>
    </van-popup>
</template>

<style lang="less" scoped>
@import '../../../../styles/variables.less';
@import '../../../../styles/mixin.less';

.popup-box {
    border-radius: 10px 10px 0 0;

    .header-box {
        display: flex;
        align-items: center;
        height: 56px;

        .left-icon {
            width: 56px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .title {
            flex: 1;
            padding-right: 56px;
            font-size: 17px;
            height: 56px;
            line-height: 56px;
            font-weight: 500;
            color: @label-color;
            text-align: center;
        }
    }

    .list-box {
        height: calc(100vh - 244px);
        overflow-y: auto;
        padding: 8px 0;

        .list-item {
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 8px 16px;
            font-size: 14px;

            .index-num {
                min-width: 20px;
                color: @red;
                text-align: right;
            }

            .content-box {
                display: flex;
                flex: 1;
                align-items: center;
                padding: 0 16px;

                .avatar {
                    object-fit: cover;
                    border-radius: 8px;
                    background-color: @grap-bg;
                }

                .info {
                    max-width: 200px;
                    margin-left: 8px;

                    .name {
                        font-size: 16px;
                        line-height: 22px;
                        color: @label-color;
                    }

                    .time {
                        margin-top: 3px;
                        font-size: 12px;
                        line-height: 17px;
                        color: @content-color;
                    }
                }
            }
            .pay-method {
                display: flex;
                align-items: center;

                .pay-text {
                    height: 17px;
                    margin-left: 4px;
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 17px;
                }
            }
        }

        :deep(.van-list__finished-text) {
            padding: 0px;
            height: 20px;
            line-height: 20px;
            color: @content-color;
            .safe-area-padding-bottom();
        }
    }
}
</style>
